<template>
	<section class="chart-container">
		<el-row>
			<el-col :span="12">
				<div id="chartColumn" style="width:100%; height:400px;"></div>
			</el-col>
			<el-col :span="12">
				<div id="chartBar" style="width:100%; height:400px;"></div>
			</el-col>
			<el-col :span="12">
				<div id="chartLine" style="width:100%; height:400px;"></div>
			</el-col>
			<el-col :span="12">
				<div id="chartPie" style="width:100%; height:400px;"></div>
			</el-col>
			<el-col :span="24">
				<a href="http://echarts.baidu.com/examples.html" target="_blank" style="float: right;">more>></a>
			</el-col>
		</el-row>
	</section>
</template>

<script>
	import echarts from 'echarts'

	export default {
		data() {
			return {
				chartColumn: null,
				chartBar: null,
				chartLine: null,
				chartPie: null
			}
		},

		methods: {
			drawColumnChart() {
				this.$http.get("/shop/echarts").then(res => {
					//实现展示每个店铺状态的个数：1234
					//后端要给两个数组：x坐标=状态["待审核","待激活","激活成功","驳回"]   y左标=个数[2,3,5,1]
					//1.将两个数组封装成一个对象-后端代码多
					//2.后端返回一个集合：[{state:"待审核",num:2},{state:"待激活",num:3}]
					var xArr = res.data.map(obj => obj.state);
					var yArr = res.data.map(obj => obj.num);

					//将状态的1234 - 转成待审核,待激活,激活成功,驳回
					for (let i = 0; i < xArr.length; i++) {
						if (xArr[i] == 1) {
							xArr.splice(i, 1, "待审核"); //替换 i表示下标 1 表示从下标往后替换多少个
						}
						if (xArr[i] == 2) {
							xArr.splice(i, 1, "待激活");
						}
						if (xArr[i] == 3) {
							xArr.splice(i, 1, "激活成功");
						}
						if (xArr[i] == 4) {
							xArr.splice(i, 1, "驳回");
						}
					}

					this.chartColumn = echarts.init(document.getElementById('chartColumn'));
					this.chartColumn.setOption({
						title: {
							text: 'Column Chart'
						},
						tooltip: {},
						xAxis: {
							data: xArr
						},
						yAxis: {},
						series: [{
							name: '入驻店铺情况',
							type: 'bar',
							data: yArr,
							itemStyle: {
								normal: {
									//这里是颜色
									color: function(params) {
										//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
										var colorList = ['#00A3E0','#749f83', 'green', '#ca8622'];
										return colorList[params.dataIndex]
									}
								}
							}
						}]
					});
				})
			},
			drawBarChart() {
				this.chartBar = echarts.init(document.getElementById('chartBar'));
				this.chartBar.setOption({
					title: {
						text: 'Bar Chart',
						subtext: '数据来自网络'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						data: ['2011年', '2012年']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					yAxis: {
						type: 'category',
						data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
					},
					series: [{
							name: '2011年',
							type: 'bar',
							data: [18203, 23489, 29034, 104970, 131744, 630230]
						},
						{
							name: '2012年',
							type: 'bar',
							data: [19325, 23438, 31000, 121594, 134141, 681807]
						}
					]
				});
			},
			drawLineChart() {
				this.chartLine = echarts.init(document.getElementById('chartLine'));
				this.chartLine.setOption({
					title: {
						text: 'Line Chart'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['邮件营销', '联盟广告', '搜索引擎']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							name: '邮件营销',
							type: 'line',
							stack: '总量',
							data: [120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '联盟广告',
							type: 'line',
							stack: '总量',
							data: [220, 182, 191, 234, 290, 330, 310]
						},
						{
							name: '搜索引擎',
							type: 'line',
							stack: '总量',
							data: [820, 932, 901, 934, 1290, 1330, 1320]
						}
					]
				});
			},
			drawPieChart() {
				this.chartPie = echarts.init(document.getElementById('chartPie'));
				this.chartPie.setOption({
					title: {
						text: 'Pie Chart',
						subtext: '纯属虚构',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: [{
								value: 335,
								name: '直接访问'
							},
							{
								value: 310,
								name: '邮件营销'
							},
							{
								value: 234,
								name: '联盟广告'
							},
							{
								value: 135,
								name: '视频广告'
							},
							{
								value: 1548,
								name: '搜索引擎'
							}
						],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				});
			},
			drawCharts() {
				this.drawColumnChart()
				this.drawBarChart()
				this.drawLineChart()
				this.drawPieChart()
			},
		},

		mounted: function() {
			this.drawCharts()
		},
		updated: function() {
			this.drawCharts()
		}
	}
</script>

<style scoped>
	.chart-container {
		width: 100%;
		float: left;
	}

	/*.chart div {
    height: 400px;
    float: left;
}*/

	.el-col {
		padding: 30px 20px;
	}
</style>
